<template>
  <div class="sidebar">
    <el-row class="tac">
      <el-col :span="12">
        <div class="home_go" @click="gohome">
          <el-icon><Document /></el-icon>
          <span>首页</span>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse-transition="true"
          :unique-opened="true"
          router
          :default-active="onRouter"
        >
          <div v-for="menu of menuList" :key="menu.uri">
            <el-sub-menu :index="menu.uri" v-if="menu.son_menus">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>{{ menu.title }}</span>
              </template>
              <el-menu-item-group
                v-for="menuc of menu.son_menus"
                :key="menuc.uri"
              >
                <el-menu-item :index="menuc.uri">{{
                  menuc.title
                }}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item :index="menu.uri" v-else>
              <template #title>
                <el-icon><Document /></el-icon>
                <span>{{ menu.title }}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs, computed } from "vue";
import axios from "@/utils/axios";

import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from "@element-plus/icons";
import { useRoute, useRouter } from "vue-router";
export default {
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      menuList: [],
    });
    //获取当前路由并跳转
    const onRouter = computed(() => {
      return "/" + route.path.split("/").reverse()[0];
    });
    onMounted(() => {
      getNav();
    });
    //首页跳转
    const gohome = () => {
      router.push("/index");
    };
    //获取菜单
    const getNav = () => {
      let http = axios.get;
      let params = "";
      http("/api/admin/menus", params).then((res) => {
        state.menuList = res.data;
      });
    };
    return {
      onRouter,
      gohome,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.home_go {
  width: 199px;
  height: 56px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  .el-icon {
    font-size: 18px;
    margin: 0 7px 0 22px;
  }
}
</style>